<template>
  <div>
     <el-image v-bind="$attrs" v-on="$listeners"  :src="fieldValue" :preview-src-list="srcList" :style="styles">
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: [String,Number]
      },
      styles:{
        type:String,
        default:''
      }
    },
    data(){
        return {
            srcUrl:'',
            srcList:[]
        }
    },
    computed: {
      fieldValue: {
        get() {
          this.srcUrl = require('@/assets/avatar.jpeg');
          this.srcList.push(this.srcUrl);
          if(this.$attrs.txtValue && this.$attrs.txtValue[this.$attrs.prop]) {

              var srcs = this.$attrs.txtValue[this.$attrs.prop];
              if(typeof srcs == 'objet') {
                  this.srcList =  srcs;
                  this.srcUrl = srcs[0];
              }else{
                  this.srcUrl = srcs;
                  this.srcList.push(this.srcUrl);
              }
          }
          return this.srcUrl;
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    }
  }
</script>


